<template>
  <page-wrap scrollType="bs" :initBs="initBs" :load="loadData" propsmaxHeight="610">
    <template v-slot:RollingTop>
      <div class="member-details-show">
        <div class="member-name">{{ memberInfo.carName }}</div>
        <div class="details-container-header" @click="goToModify" v-show="memberInfo.cardType == 1">
          <!-- <div class="label-choose" @click.stop="labelShow = true">选择标签</div> -->
          <div class="card-header">
            <div class="card-header-id">{{ memberInfo.code }}</div>
            <div class="card-header-change" v-if="canChange" @click.stop="cardChange(memberInfo.cardType)"><div class="icon"></div>切换{{memberInfo.cardType == 1?'门店':'品牌'}}卡</div>
          </div>
          <div class="card-main">
            <div class="card-main-left">
              <img
                src="@\assets\images\workbench\defaultAvatar.png"
                class="card-avator"
              />
              <img
                v-if="memberInfo.sex === '011001'"
                src="@\assets\images\member\v_member-gender.png"
                class="card-gender"
              />
              <img
                v-else
                src="@\assets\images\member\v_member-gender_girl.png"
                class="card-gender"
              />
            </div>
            <div class="card-main-right">
              <div class="card-right-cell">
                <div class="card-name">{{ memberInfo.name }}</div>
                <div class="card-icon"></div>
              </div>
              <div class="card-phone">{{ hideMiddleDigits(memberInfo.mobile) }}</div>
              <div class="card-bir" v-if="memberInfo.birthday">
                会员生日：{{ dayjs(memberInfo.birthday).format('MM月DD日') }}
              </div>
              <div class="card-bir" v-else>
                会员生日：未填写
              </div>
            </div>
          </div>
          <!-- <div class="card-label">
            <div class="card-label-item" :style="{ backgroundColor: v.color }"  v-for="(v,k) in UserLabelList">{{ v.name }}</div>
          </div> -->
          <div class="card-footer">
         
            <div class="card-footer-end">
              开卡时间：{{ dayjs(memberInfo.regDate ).format('YYYY-MM-DD') }}
              {{ dayjs(memberInfo.regDate ).format('HH:mm:ss') }}
            </div>
          </div>
        </div>
        <div class="details-container-header1" @click="goToModify" v-show="memberInfo.cardType == 2">
          <!-- <div class="label-choose" @click.stop="labelShow = true">选择标签</div> -->
          <div class="card-header">
            <div class="card-header-id">{{ memberInfo.code }}</div>
            <div class="card-header-change" v-if="canChange" @click.stop="cardChange(memberInfo.cardType)"><div class="icon"></div>切换{{memberInfo.cardType == 1?'门店':'品牌'}}卡</div>
          </div>
          <div class="card-main">
            <div class="card-main-left">
              <img
                src="@\assets\images\workbench\defaultAvatar.png"
                class="card-avator"
              />
              <img
                v-if="memberInfo.sex === '011001'"
                src="@\assets\images\member\v_member-gender.png"
                class="card-gender"
              />
              <img
                v-else
                src="@\assets\images\member\v_member-gender_girl.png"
                class="card-gender"
              />
            </div>
            <div class="card-main-right">
              <div class="card-right-cell">
                <div class="card-name">{{ memberInfo.name }}</div>
                <div class="card-icon"></div>
              </div>
              <div class="card-phone">{{ hideMiddleDigits(memberInfo.mobile) }}</div>
              <div class="card-bir" v-if="memberInfo.birthday">
                会员生日：{{ dayjs(memberInfo.birthday).format('MM月DD日') }}
              </div>
              <div class="card-bir" v-else>
                会员生日：未填写
              </div>
            </div>
          </div>
          <!-- <div class="card-levelUp" v-has-role="'waiter-member-upgrade'" @click.stop="onLevelUp(memberInfo)" v-if="memberInfo.isPayCard == '1' && memberInfo.memberIsPayCard == '0'"></div> -->
          <!-- <div style="height: 22px;" v-else></div> -->
          <div style="height: 22px;"></div>
          <!-- <div class="card-label">
            <div class="card-label-item" :style="{ backgroundColor: v.color }"  v-for="(v,k) in UserLabelList">{{ v.name }}</div>
          </div> -->
          <div class="card-footer" v-if="memberInfo.memberIsPayCard == '0'" >
            <div class="card-footer-end">
              开卡时间：{{ dayjs(memberInfo.regDate ).format('YYYY-MM-DD') }}
              {{ dayjs(memberInfo.regDate ).format('HH:mm:ss') }}
            </div>
          </div>
          <div class="card-bottom" v-if="memberInfo.memberIsPayCard == '1'">
            <div class="card-bottom-icon"></div>
            <div class="card-bottom-end">
              权益卡到期时间：{{ dayjs(memberInfo.payCardExpireDate ).format('YYYY-MM-DD') }}
              {{ dayjs(memberInfo.payCardExpireDate ).format('HH:mm:ss') }}
            </div>
            <div class="card-bottom-value" v-has-role="'waiter-member-upgrade'" @click.stop="onLevelUp(memberInfo)">续费</div>
          </div>
        </div>
        <div class="card-label">
          <div class="card-label-left">
            <div class="card-label-item" :style="{ backgroundColor: v.color }"  v-for="(v,k) in UserLabelList">{{ v.name }}</div>
          </div>
          <div class="card-label-right" v-has-role="'waiter-member-label'"  @click="labelShow = true">
            选择标签
          </div>
        </div>
        <div class="details-container-summary">
          <div class="summary-item">
            <div class="summary-item-title" style="color: #ffaa00">
              {{ formatNumber(memberInfo.currentAmtAct) }}
            </div>
            <div class="summary-item-value" @click="showAmt">会员余额 
              <div class="value-icon"></div>
              <div class="showAmt" v-show="isShowAmt">
                <div class="showAmt-top">
                  <div class="showAmt-top-value">{{ formatNumber(memberInfo.currentAmtAct) }}</div>
                  <div class="showAmt-top-title">总余额</div>
                </div>
                <div class="showAmt-main">
                  <div class="showAmt-main-value">本金金额：{{ formatNumber(memberInfo.currentAmt)}} </div>
                  <div class="showAmt-main-value">赠送金额：{{ formatNumber(memberInfo.currentPresentAmt)}} </div>
                </div>
              </div>
            </div>
            <div class="summary-item-line"></div>
          </div>
          <div class="summary-item">
            <div class="summary-item-title">{{ formatNumber(memberInfo.currentCoins) }}</div>
            <div class="summary-item-value">金币</div>
            <div class="summary-item-line"></div>
          </div>
          <div class="summary-item">
            <div class="summary-item-title">{{ formatNumberZero(memberInfo.currentPoint) }}</div>
            <div class="summary-item-value">积分</div>
            <div class="summary-item-line"></div>
          </div>
          <div class="summary-item" style="border: none" @click="goToCoupon">
            <div class="summary-item-title">{{ formatNumberZero(memberInfo.ticketCount) }}</div>
            <div class="summary-item-value icon">优惠券</div>
          </div>
        </div>
      </div>
    </template>
    <template v-slot:extension>
      <div class="details-container-main">
          <z-tab
            v-model:active="tabActive"
            :tabList="tabList"
            top="13"
            @click-tab="setActive"
            class="tabSelf"
          ></z-tab>
        </div>
    </template>
    <div class="member-details-container">
      <div class="container-main-center" v-show="currentIndex === 0">
        <van-list
          v-model:loading="loading"
          :finished="finished"
          finished-text="没有更多了"
          
        >
          <div
            class="center-item"
            v-for="(item, index) in ConsumeRecord"
            :key="index"
          >
            <div class="center-item-upper">
                {{ dayjs(item.operDate).format('YYYY-MM-DD') }}
                {{ dayjs(item.operDate).format('HH:mm:ss') }}
            </div>
            <div class="center-item-main" style="padding-bottom: 28px;">
              <div class="item-main-left">
                  {{ item.carName }}
              </div>
              <div class="item-main-right">
                  <div class="right-title">金额：</div>
                  <div class="right-value">{{formatNumber(Number(item.operAmt) + Number(item.opPreAmt))}}</div>
                  <div class="right-min">(本金{{formatNumber(item.operAmt)}}，赠送{{formatNumber(item.opPreAmt)}})</div>
              </div>
            </div>
            <div class="center-item-below">
              <div class="below-left">结账单号：{{ item.referCode }}</div>
              <div class="below-right">金币：{{ item.operCoins }}</div>
            </div>
          </div>
        </van-list>
      </div>

      <div class="container-main-center" v-show="currentIndex === 1">
        <van-list
          v-model:loading="loading"
          :finished="finished"
          finished-text="没有更多了"
          
        >
          <div
            class="center-item"
            v-for="(item, index) in CoinsRecord"
            :key="index"
          >
            <div class="center-item-upper">
                {{ dayjs(item.operDate).format('YYYY-MM-DD') }}
                {{ dayjs(item.operDate).format('HH:mm:ss') }}
            </div>
            <div class="center-item-main">
              <div class="item-main-left">
                  {{ item.orgName }}
              </div>
              <div class="item-main-right">
                  <!-- <div class="right-title">+</div> -->
                  <div class="right-value">{{item.operPoint}}</div>
              </div>
            </div>
            <div class="center-item-below">
              <div class="below-left">关联单号：{{ item.referCode }}</div>
              <div class="below-right-coin">{{ item.tranContent }}</div>
            </div>
          </div>
        </van-list>
      </div>

      <div class="container-main-center" v-show="currentIndex === 2">
        <van-list
          v-model:loading="loading"
          :finished="finished"
          finished-text="没有更多了"
          
        >
          <div
            class="center-item"
            v-for="(item, index) in ChargeRecord"
            :key="index"
          >
            <div class="center-item-upper">
                {{ dayjs(item.operDate).format('YYYY-MM-DD') }}
                {{ dayjs(item.operDate).format('HH:mm:ss') }}
            </div>
            <div class="center-item-main" style="padding-bottom:0px;">
              <div style="display: flex;flex-direction: column;">
                <div class="item-main-left">
                  {{ item.carName }}
              </div>
              <div class="center-item-below" style="margin-top: 20px;">
              <div class="below-left">充值流水号：{{ item.rechargeCode }}</div>
            </div>

              </div>
           
              <div class="item-main-spe" style="position: static;">
                  {{formatNumber(item.totalChargeAmt)}}
                  <div class="spe-value">本金:{{formatNumber(item.operAmt)}} </div>
                  <div class="spe-value">赠送:{{formatNumber(item.presentAmt)}}</div>
              </div>
            </div>
            <div style="display: flex;justify-content: space-between;margin-top: 10px;" :style="{'border-top: 1px solid #383840;':item.referManName !==null && item.referRoomName !==null}">
              <div class="center-item-below" v-if="item.referManName">
              <div class="below-left" style="margin-top: 10px;">推荐人：{{ item.referManName }}</div>
            </div>
            <div class="center-item-below" v-if="item.referRoomName">
              <div class="below-left" style="margin-top: 10px;">桌号：{{ item.referRoomName }}</div>
            </div>
              
            </div>

          </div>
        </van-list>
      </div>
      <div class="container-main-center" v-show="currentIndex === 3">
        <van-list
          v-model:loading="loading"
          :finished="finished"
          finished-text="没有更多了"
          
        >
          <div
            class="center-item"
            v-for="(item, index) in CouponRecord"
            :key="index"
          >
            <div class="center-item-upper" v-if="item.ticketState == '2'">使用时间
                {{ dayjs(item.consumeDate).format('YYYY-MM-DD') }}
                {{ dayjs(item.consumeDate).format('HH:mm:ss') }}
            </div>
            <div class="center-item-upper" v-if="item.ticketState == '1'">获取时间
                {{ dayjs(item.getTicketDate).format('YYYY-MM-DD') }}
                {{ dayjs(item.getTicketDate).format('HH:mm:ss') }}
            </div>
            <div class="center-item-upper" v-if="item.ticketState == '3'">过期时间
                {{ dayjs(item.endData).format('YYYY-MM-DD') }}
                {{ dayjs(item.endData).format('HH:mm:ss') }}
            </div>
            <div class="center-item-main">
              <div class="item-main-left">
                  {{ item.consumeOrgName?item.consumeOrgName:'-- --' }}
              </div>
              <div class="item-main-right">
                  <div class="right-value">{{item.ticketName}}</div>
              </div>
            </div>
            <div class="center-item-below">
              <div class="below-left">关联单号：{{ item.consumeCode?item.consumeCode:'-- --' }}</div>
            </div>
            <div class="poa-center-box">
              <div class="below-right" v-if="item.ticketState == '1'">未使用</div>
              <div class="below-right" v-if="item.ticketState == '2'">已使用 </div>
              <div class="below-right" v-if="item.ticketState == '3'">已过期</div>
            </div>
          </div>
        </van-list>
      </div>
    </div>
  </page-wrap>
 
  <!-- 标签选择 -->
  <z-popup
    v-model:show="labelShow"
    :style="{ width: '334px' }"
    closeable
    @close="labelShow = false"
  >
    <div class="popup-label">
        <div class="popup-label-title">为会员添加标签</div>
        <div class="popup-label-main">
          <div class="main-item"  >
            <div class="group-title" v-if="labelList.length > 1">可多选</div>
            <div class="main-item-group" :class="{'no-border': labelList.length < 1}"> 
              <div class="group-value" v-for="(item,index) in labelList" :key="index" @click="selectLabel(index)" :class="item.active?'active':''">{{ item.tagName }}</div>
            </div>
            <div v-if="labelList.length <1" style="text-align: center;color: #fff;font-size: 20px;">
              暂无标签
            </div>
          </div>
        </div>
        <div class="popup-label-btn">
          <div class="btn-cancle" @click="labelShow = false">取消</div>
          <div class="btn-confirm" @click="confirmLabel">确认</div>
        </div>
    </div>
  </z-popup>
</template>

<script setup>
import dayjs from 'dayjs'
const router = useRouter()
const route = useRoute()
import Api from '@/api'
import { formatNumber } from '@/lib/util.js'
import { showToast } from 'vant';
import useConfigStore from '@/store/config'
const configStore = useConfigStore()

// 获取跳转页面传递的参数
const memberId = route.query.memberId
const code = route.query.code

const memberInfo = ref({}) // 显示数据
const memberInfoList = ref([]) // 会员卡数组
const canChange = ref(true) // 是否可以切换会员卡
// 会员充值记录
const ChargeRecord = ref([])
// 积分记录
const CoinsRecord = ref([])
// 会员消费记录
const ConsumeRecord = ref([])
const CouponRecord = ref([])
//表单
const postForm = reactive({
  memberCode: code,
  page: 1,
  pageSize: 999,
  ticketState:''
})

const userInfo = ref({})
const getInfo = (code)=>{
  console.log(code);
  
  Api.Common.AppObjProcess.Do({ functionName: 'GetMemberInfoOne',contentData: { code: code }})
  .then(res=>{
    console.log(res);
    userInfo.value = res.result[0]
    getLabelList()
  })
}
// 会员标签选择
const labelShow = ref(false)
const labelList = ref([])
// 获取标签
const getLabelList = ()=>{
  Api.Common.AppObjProcess.Do({functionName: 'GetMemberTag',contentData: ''})
  .then(res=>{
    console.log(res);
    const resultArray = res.result.map(obj => obj.tagArry).flat();
    resultArray.map(v=>{
        v.active = false
    })
    
    labelList.value = resultArray

    labelList.value.map(item=> {
      UserLabelList.value.map(v=> {
        console.log(v.name,'cccvv')
        if (v.name === item.tagName) {
            item.active = true;
         }
       })

    })

    console.log(labelList.value);
    
    
  })
}
// 选中标签
const selectLabel = (index)=>{
  labelList.value[index].active = !labelList.value[index].active
}
// 确认标签
const confirmLabel = ()=>{
  let arr = []
  if(labelList.value){
    // arr = labelList.value.flatMap(item => item.tagArry);
    arr = labelList.value
  }
  console.log(arr.filter(item => item.active));
  
  if(arr.filter(item => item.active).length > 3){
    showToast('标签最大可选3个')
    return
  }
  if(arr.filter(item => item.active).length == 0){
    showToast('请选择标签')
    return
  }
  function convertArrayToString(arr) {
    return arr
      .filter(item => item.active) // 只保留 active 为 true 的项
      .map(item => `${item.tagName}:${item.tagColor}`) // 转换为 "名称:颜色" 格式
      .join(','); // 用逗号连接字符串
  }
  const resultString = convertArrayToString(arr);
  userInfo.value.tag = resultString
  userInfo.value.code = userInfo.value.memberCode
  Api.Common.AppObjProcess.Do({ functionName: 'UpdateMember',contentData: userInfo.value})
  .then(res=>{
    labelShow.value = false
    console.log(res);
    Init()
  })
}
const isShowAmt = ref(false)
const showAmt = ()=>{
  isShowAmt.value = true
  setTimeout(() => {
    isShowAmt.value = false
    }, 2000); // 2秒后隐藏提示
}
// ----------------------------------------------- 会员卡切换 -------------------------------------------------------------

const cardChange = (k)=>{   // 1 品牌卡 2门店卡

  let cardId = memberInfoList.value.findIndex(item=>item.cardType == 1) // 品牌卡下标
  let storeCardId = memberInfoList.value.findIndex(item=>item.cardType == 2) // 门店卡下标
  console.log(cardId);
  console.log(storeCardId);
  if(k == 1){
    memberInfo.value = memberInfoList.value[storeCardId]
  }else{
    memberInfo.value = memberInfoList.value[cardId]
  }
  console.log(memberInfo.value);
  postForm.memberCode = memberInfo.value.code
  loadData(true)
  console.log(memberInfo.value);
}

// ------------------------------------------------ 会员卡升级 -------------------------------------------------------
const onLevelUp = (info)=>{
  console.log(11);
  router.push({
        path: '/onmember/upVip',
        
        query: {type:'levelUp',amt:info.payCardAmt,carNo:info.code}
      })
}
// -------------------------------------------------------加载  下拉刷新---------------------------------------------------------
const loading = ref(false)
const finished = ref(false)
const initBs = ref(0)
const target = ref(0) // 下拉加载更多的目标
const loadData = async function (refresh = false) {
  if (refresh === true) {
    postForm.page = 1
    ChargeRecord.value = []
    CoinsRecord.value = []
    ConsumeRecord.value = []
    CouponRecord.value = []
    finished.value = false
  }
  loading.value = true
  switch (target.value) {
    case 0: // 消费记录
      target.value = 0
      const GetMemberConsumeRecord = await Api.Common.AppObjProcess.Do({
        functionName: 'GetMemberConsumeRecord',
        contentData: postForm
      })
      if (refresh===true) {
        if (GetMemberConsumeRecord.result.length!==postForm.pageSize) {
            finished.value = true
        }
    }
      Array.prototype.push.apply(
        ConsumeRecord.value,
        GetMemberConsumeRecord.result
      )
      console.log(GetMemberConsumeRecord.result);
      if (GetMemberConsumeRecord.result.length > 0) {
        postForm.page++
      } else {
        finished.value = true
      }
      loading.value = false
      if (refresh===true) {
        initBs.value++
    }
      break
    case 1: // 积分记录
      target.value = 1
      const GetMemberCoinsRecord = await Api.Common.AppObjProcess.Do({
        functionName: 'GetPointRecord',
        contentData: postForm
      })
      if (refresh===true) {
        if (GetMemberCoinsRecord.result.length!==postForm.pageSize) {
            finished.value = true
        }
    }
      Array.prototype.push.apply(CoinsRecord.value, GetMemberCoinsRecord.result)
      console.log(GetMemberCoinsRecord.result);
      if (GetMemberCoinsRecord.result.length > 0) {
        postForm.page++
      } else {
        finished.value = true
      }
      loading.value = false
      if (refresh===true) {
        initBs.value++
    }
      break
    case 2: // 充值记录
      target.value = 2
      const GetMemberChargeRecord = await Api.Common.AppObjProcess.Do({
        functionName: 'GetMemberChargeRecord',
        contentData: postForm
      })
      if (refresh===true) {
        if (GetMemberChargeRecord.result.length!==postForm.pageSize) {
            finished.value = true
        }
    }
      Array.prototype.push.apply(
        ChargeRecord.value,
        GetMemberChargeRecord.result
      )
      console.log(GetMemberChargeRecord.result);
      if (GetMemberChargeRecord.result.length > 0) {
        postForm.page++
      } else {
        finished.value = true
      }
      loading.value = false
      if (refresh===true) {
        initBs.value++
    }
      break
    case 3: // 卡券记录
      target.value = 3
      const GetCouponRecord = await Api.Common.AppObjProcess.Do({
        functionName: 'GetMemberTicket',
        contentData: postForm
      })
      if (refresh===true) {
        if (GetCouponRecord.result.length!==postForm.pageSize) {
            finished.value = true
        }
    }
      Array.prototype.push.apply(
        CouponRecord.value,
        GetCouponRecord.result
      )
      console.log(GetCouponRecord.result);
      if (GetCouponRecord.result.length > 0) {
        postForm.page++
      } else {
        finished.value = true
      }
      loading.value = false
      if (refresh===true) {
        initBs.value++
    }
      break
  }
}

//------------------------------------------------------切换记录（消费、金币消费、充值）--------------------------------------------------
const active = ref(0)
const tabActive = ref(0)
const currentIndex = ref(1) // 显示哪一个
const tabList = [
  {
    name: '消费记录'
  },
  {
    name: '积分记录'
  },
  {
    name: '充值记录'
  },
  {
    name: '卡券记录'
  }
]
const setActive = value => {
  switch (value.name) {
    case 0: 
      currentIndex.value = 0
      target.value = 0
      loadData(true)
      break
    case 1: 
      currentIndex.value = 1
      target.value = 1
      loadData(true)
      break
    case 2: 
      currentIndex.value = 2
      target.value = 2
      loadData(true)
      break
    case 3: 
      currentIndex.value = 3
      target.value = 3
      loadData(true)
      break
  }
}
//---------------------------------------------------------------------------跳转页面--------------------------------------------------
// 跳转到修改页
const goToModify = () => {
  router.push({
    name: `OnmemberModify`,
    params: { memberId: memberInfo.value.memberCode }
  })
}
// 跳转到优惠券页面
const goToCoupon = () => {
  router.push({
    path: `/onmember/coupon`,
    query: { memberId: memberInfo.value.code }
  })
}

//---------------------------------------------------------------------------保留两位小数--------------------------------------------------
// function formatNumber (num) {
//   if (num) {
//     return num.toFixed(2)
//   } else {
//     return 0
//   }
// }
// 无数据返回0
function formatNumberZero (num) {
  if (num) {
    return num
  } else {
    return 0
  }
}
// -------------------------------------------------隐藏手机号码中间的4位数------------------------------------------
const hideMiddleDigits =(phone)=> {
  if(phone){
    const start = phone.substring(0, 3);
      const end = phone.substring(7);
      return start + '****' + end;
  }
      
}
//------------------------------------------------------获取初始数据------------------------------------------------------------------
const UserLabelList = ref([])
const Init = () => {
  currentIndex.value = 0
  target.value = 0
  
  // 获取会员信息
  const GetMemberInfo = Api.Common.AppObjProcess.Do({
    functionName: 'GetMemberInfo',
    contentData: { code: memberId }
  })
    .then(res => {
      console.log(res);
      if(res.result[0].memberLabel){
         UserLabelList.value = res.result[0].memberLabel.split(',').map(pair => {
          const [name, color] = pair.split(':');
          return { name, color };
        });
        UserLabelList.value = UserLabelList.value.slice(0, 3) // 只显示3个标签
        console.log(UserLabelList.value);
        
      }
      getInfo(res.result[0].memberCode)
      console.log(configStore.shopInfo);
      if(!configStore.shopInfo.isUseBrandCard){
        res.result = res.result.filter(card => card.cardType != 1);
      }
      console.log(res);
      if(res.result.length <= 1){
        canChange.value = false
      }
      memberInfo.value = res.result[0]
      memberInfoList.value = res.result
      loadData(true)
    })
    
}
Init()
</script>

<style scoped lang="scss">
@import '@/styles/l.scss';
.member-details-container {
  font-family: PingFang SC;
  font-weight: 500;
  padding-top: 10px;
  .container-main-center {
    margin: 0 12px;
    .center-item {
      position: relative;
      border-bottom: 1px solid #383840;
      background: #28282E;
      border-radius: 5px;
      padding: 12px;
      margin-bottom: 10px;
      .poa-center-box {
        position: absolute;
        right: 0;
        top: 0;
        width: 50px;
        height: 20px;
        background: #383840;
        border-radius: 0px 8px 0px 8px;
        font-family: PingFang SC;
        font-weight: 500;
        font-size: 13px;
        color: #999999;
        text-align: center;
      }
      .center-item-upper {
        font-family: PingFang SC;
        font-weight: 500;
        font-size: 12px;
        color: #CCCCCC;
        line-height: 12px;
        padding-bottom: 9px;
        border-bottom: 1px solid #383840;
      }
      .center-item-main{
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 0 17px 0;
        .item-main-left{
          font-family: PingFang SC;
          font-weight: bold;
          font-size: 16px;
          color: #FFFFFF;
          line-height: 16px;
        }
        .item-main-right{
          display: flex;
          align-items: center;
          position: relative;
          .right-min{
            position: absolute;
            font-family: PingFang SC;
            font-weight: 500;
            font-size: 12px;
            color: #666666;
            line-height: 12px;
            right: 0;
            top: 20px;
            white-space: nowrap;
          }
          .right-title{
            font-family: PingFang SC;
            font-weight: 500;
            font-size: 12px;
            color: #FFFFFF;
            line-height: 12px;
          }
          .right-value{
            font-family: PingFang SC;
            font-weight: bold;
            font-size: 16px;
            color: #FFFFFF;
            line-height: 16px;
          }
        }
      }
      .center-item-below {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .below-left{
          font-family: PingFang SC;
          font-weight: 500;
          font-size: 12px;
          color: #CCCCCC;
          line-height: 12px;
        }
        .below-right{
          width: 90px;
          height: 16px;
          background: #383840;
          border-radius: 2px;
          font-family: PingFang SC;
          font-weight: 500;
          font-size: 12px;
          color: #999999;
          line-height: 16px;
          text-align: center;
        }
        .below-right-coin{
          font-family: PingFang SC;
          font-weight: 500;
          font-size: 12px;
          color: #999999;
          line-height: 12px;
        }
      }
      .item-main-spe{
        position: absolute;
        right: 12px;
        bottom: 12px;
        font-family: PingFang SC;
        font-weight: bold;
        font-size: 16px;
        color: #FFFFFF;
        line-height: 15px;
        
        .spe-value{
          font-family: PingFang SC;
          font-weight: 500;
          font-size: 12px;
          color: #666666;
          line-height: 15px;
          margin-top: 2px
        }
      }
    }
  }
}
.member-details-show {
  font-family: PingFang SC;
  font-weight: 500;
  .member-name{
    font-family: PingFang SC;
    font-weight: 500;
    font-size: 18px;
    color: #FFFFFF;
    line-height: 18px;
    padding: 12px 0 0 12px;
  }
  .details-container-header {
    margin: 10px 12px 10px 12px;
    border-radius: 10px;
    background-image: url('@/assets/images/member/v_member-card.png');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    .label-choose{
      position: absolute;
      bottom: 10px;
      right: 10px;
      width: 100px;
      height: 30px;
      text-align: center;
      line-height: 30px;
      background-color: #80590d;
      border-radius: 16px;
      font-family: PingFang SC;
      font-weight: bold;
      font-size: 14px;
      color: #ffffff;
    }
    .card-header {
      display: flex;
      justify-content: space-between;
      // align-items: ;
      .card-header-id{
        display: inline-block;
        vertical-align: top;
        font-size: 12px;
        line-height: 12px;
        color: #664b14;
        padding: 4px 10px 5px 10px;
        background: #ecdeb4;
        border-radius: 8px 0px 10px 0px;
        margin-bottom: 17px;
      }
      .card-header-change{
          width: 90px;
          height: 20px;
          background: linear-gradient(90deg, #FF3333, #FF8833);
          border-radius: 10px;
          font-family: PingFang SC;
          font-weight: 500;
          font-size: 12px;
          line-height: 20px;
          color: #FFFFFF;
          text-align: right;
          padding-right: 5px;
          position: relative;
          .icon{
            position: absolute;
            left: 10px;
            top: 5px;
            width: 10px;
            height: 10px;
            background-image: url('@/assets/svg/member/v_member-change.png');
            background-position: center;
            background-size: cover;
            background-repeat: no-repeat;
          }
          
      }
    }
    .card-main {
      display: flex;
      margin-bottom: 32px;
      .card-main-left {
        width: 51px;
        height: 51px;
        margin-right: 12px;
        margin-left: 10px;
        position: relative;
        .card-avator {
          width: 51px;
          height: 51px;
        }
        .card-gender {
          position: absolute;
          width: 18px;
          height: 18px;
          bottom: 0;
          right: 0;
        }
      }
      .card-main-right {
        .card-right-cell {
          display: flex;
          align-items: center;
          .card-name {
            font-size: 18px;
            line-height: 18px;
            font-weight: bold;
            color: #80590d;
            margin-right: 8px;
          }
          .card-icon {
            width: 60px;
            height: 22px;
            background-image: url('@/assets/images/member/v_member-level.png');
            background-position: center;
            background-size: cover;
            background-repeat: no-repeat;
          }
        }
        .card-phone {
          font-size: 12px;
          line-height: 12px;
          color: #a6823a;
          padding: 5px 0 5px 0;
        }
        .card-bir {
          font-size: 12px;
          line-height: 12px;
          color: #a6823a;
        }
      }
    }
  
    .card-footer {
      font-size: 12px;
      line-height: 12px;
      color: #664b14;
      .card-footer-start {
        padding-left: 73px;
        padding-bottom: 8px;
      }
      .card-footer-end {
        padding-left: 11px;
        padding-bottom: 13px;
      }
    }
  }
  .details-container-header1 {
    margin: 10px 12px 10px 12px;
    border-radius: 10px;
    background-image: url('@/assets/images/member/v_member-card2.png');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    .label-choose{
      position: absolute;
      bottom: 30px;
      right: 10px;
      width: 100px;
      height: 30px;
      text-align: center;
      line-height: 30px;
      background-color: #ecd8b4;
      border-radius: 16px;
      font-family: PingFang SC;
      font-weight: bold;
      font-size: 16px;
      color: #FFAA00;
    }
    .card-header {
      display: flex;
      justify-content: space-between;
      // align-items: ;
      .card-header-id{
        display: inline-block;
        vertical-align: top;
        font-size: 12px;
        line-height: 12px;
        color: #FFFFFF;
        padding: 4px 10px 5px 10px;
        background: #DB230F;
        border-radius: 8px 0px 10px 0px;
        margin-bottom: 17px;
      }
      .card-header-change{
          width: 90px;
          height: 20px;
          background: linear-gradient(0deg, #E9CDA4, #F4EECF);
          border-radius: 10px;
          font-family: PingFang SC;
          font-weight: 500;
          font-size: 12px;
          line-height: 20px;
          color: #312203;
          text-align: right;
          padding-right: 5px;
          position: relative;
          .icon{
            position: absolute;
            left: 10px;
            top: 5px;
            width: 10px;
            height: 10px;
            background-image: url('@/assets/svg/member/v_member-change1.png');
            background-position: center;
            background-size: cover;
            background-repeat: no-repeat;
          }
          
      }
    }
    .card-main {
      display: flex;
      margin-bottom: 10px;
      .card-main-left {
        width: 51px;
        height: 51px;
        margin-right: 12px;
        margin-left: 10px;
        position: relative;
        .card-avator {
          width: 51px;
          height: 51px;
        }
        .card-gender {
          position: absolute;
          width: 18px;
          height: 18px;
          bottom: 0;
          right: 0;
        }
      }
      .card-main-right {
        .card-right-cell {
          display: flex;
          align-items: center;
          .card-name {
            font-size: 18px;
            line-height: 18px;
            font-weight: bold;
            color: #FFFFFF;
            margin-right: 8px;
          }
          .card-icon {
            width: 60px;
            height: 22px;
            background-image: url('@/assets/images/member/v_member-level.png');
            background-position: center;
            background-size: cover;
            background-repeat: no-repeat;
          }
        }
        .card-phone {
          font-size: 12px;
          line-height: 12px;
          color: #FFE5E5;
          padding: 5px 0 5px 0;
        }
        .card-bir {
          font-size: 12px;
          line-height: 12px;
          color: #FFE5E5;
        }
      }
    }
    .card-levelUp{
      width: 100px;
      height: 30px;
      background-image: url('@/assets/images/member/i_levelUp.png');
      background-position: center;
      background-size: 100%;
      background-repeat: no-repeat;
      margin-bottom: 22px;
      margin-left: 73px;
    }
    
    .card-footer {
      font-size: 12px;
      line-height: 12px;
      color: #990000;
      .card-footer-start {
        padding-left: 73px;
        padding-bottom: 8px;
      }
      .card-footer-end {
        padding-left: 11px;
        padding-bottom: 13px;
      }
    }
    .card-bottom{
      display: flex;
      align-items: center;
      padding: 0 0 10px 10px;
      .card-bottom-icon{
        width: 17px;
        height: 14px;
        background-image: url('@/assets/images/member/i_icon_demo.png');
        background-position: center;
        background-size: 100%;
        background-repeat: no-repeat;
        margin-right: 6px;
      }
      .card-bottom-end{
        font-family: PingFang SC;
        font-weight: 500;
        font-size: 12px;
        color: #990000;
        line-height: 12px;
        margin-right: 10px;
      }
      .card-bottom-value{
        width: 50px;
        height: 20px;
        background: #17171A;
        border-radius: 10px;
        font-family: PingFang SC;
        font-weight: 500;
        font-size: 12px;
        color: #FFFFFF;
        line-height: 20px;
        text-align: center;
      }
    }
  }
  .details-container-summary {
    display: flex;
    background: #28282e80;
    box-shadow: inset 0 0 20px rgba(63, 61, 66, 0.5);
    border-radius: 8px;
    margin: 0 12px 18px 12px;
    .summary-item {
      flex-basis: 25%;
      text-align: center;
      margin: 20px 0;
      position: relative;
      .summary-item-title {
        line-height: 14px;
        font-size: 14px;
        font-weight: bold;
        color: #ffffff;
        padding-bottom: 18px;
      }
      .summary-item-value {
        line-height: 12px;
        font-size: 12px;
        font-weight: 500;
        color: #cccccc;
        position: relative;
        &.icon {
          background-image: url('@/assets/svg/member/v_member-triangle.svg');
          background-position: 65px center;
          background-size: contain;
          background-repeat: no-repeat;
        }
        .value-icon{
          width: 13px;
          height: 13px;
          position: absolute;
          right: 4px;
          bottom: 0px;
          background-image: url('@/assets/svg/member/v_member-icon.png');
          background-position: center;
          background-size: contain;
          background-repeat: no-repeat;
        }
        .showAmt{
          width: 150px;
          height: 106px;
          position: absolute;
          right: -130px;
          bottom: 10px;
          z-index: 990;
          background-image: url('@/assets/images/member/i_back-amt.png');
          background-position: center;
          background-size: contain;
          background-repeat: no-repeat;
          padding: 12px;
          .showAmt-top{
            padding-bottom: 10px;
            .showAmt-top-value{
              color: #FFFFFF;
              padding-bottom: 8px;
            }
          }
          .showAmt-main{
            text-align: left;
            .showAmt-main-value{
              padding-bottom: 8px;
            }
          }
        }
      }
      .summary-item-line {
        position: absolute;
        width: 1px;
        height: 40px;
        right: 0px;
        top: 0px;
        background-image: url('@/assets/images/common/i_onwine-line.png');
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
      }
    }
  }
  .details-container-main {
    .tabSelf {
      padding-right: 73px;
    }
    .container-main-title {
      line-height: 16px;
      font-size: 16px;
      color: #cccccc;
      border-bottom: 1px solid #383840;
      display: flex;
      .record-consumption {
        margin-left: 12px;
        padding-bottom: 12px;
      }
      .record-species {
        padding-bottom: 12px;
        margin-left: 30px;
      }
      .record-recharge {
        padding-bottom: 12px;
        margin-left: 30px;
      }
      .active {
        font-size: 16px;
        line-height: 16px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #ffaa00;
        position: relative;
      }
      .active::after {
        content: '';
        display: block;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 30px;
        height: 2px;
        background: #ffaa00;
      }
    }
  }
}
.card-label{
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: #28282E;
      border-radius: 8px;
      padding: 10px 12px 10px 2px;
      margin: 0 12px 10px;
      .card-label-left{
        display: flex;
        align-items: center;
        .card-label-item{
          // width: 54px;
          padding: 0 8px;
          height: 24px;
          background: linear-gradient(-25deg, #FFF266, #FF4000);
          border-radius: 12px;
          font-family: PingFang SC;
          font-weight: 500;
          font-size: 14px;
          color: #662B00;
          line-height: 24px;
          text-align: center;
          margin-left: 10px;
        }
      }
      .card-label-right{
        width: 70px;
        height: 30px;
        background: #5C5C66;
        border-radius: 4px;
        font-family: PingFang SC;
        font-weight: 500;
        font-size: 14px;
        color: #FFFFFF;
        line-height: 30px;
        text-align: center;
      }
    
    }
.popup-label{
  .popup-label-title{
    padding: 20px;
    font-family: PingFang SC;
    font-weight: bold;
    font-size: 16px;
    color: #FFFFFF;
    line-height: 16px;
    text-align: center;
  }
  .popup-label-main{
    // display: flex;
    // align-items: center;
    // // justify-content: space-between;
    // flex-wrap: wrap;
    // padding: 10px 0 ;
    .main-item{
      .group-title{
        padding: 0 10px 2px;
        line-height: 16px;
        font-family: PingFang SC;
        font-weight: bold;
        font-size: 16px;
        color: #ffffff;
      }
      .main-item-group{
        display: flex;
        align-items: center;
        padding: 10px 12px 20px 2px;
        flex-wrap: wrap;
        border-bottom: 1px solid #505059;;
        .group-value{
          //width: 54px;
          padding: 0 10px;
          height: 24px;
          background: #5C5C66;
          border-radius: 12px;
          font-family: PingFang SC;
          font-weight: 500;
          font-size: 14px;
          color: #FFFFFF;
          line-height: 24px;
          text-align: center;
          margin-left: 10px;
          margin-bottom: 12px;
          &.active{
            background: linear-gradient(-25deg, #FFF266, #FF4000);
            color: #662A00;
          }
        }
      }
      .no-border {
        border-bottom: none;
      }
    }
  }
  .popup-label-btn{
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    padding: 30px 12px 20px;
    .btn-cancle{
      width: 45%;
      height: 40px;
      border-radius: 20px;
      border: 1px solid #CCBEA3;
      font-family: PingFang SC;
      font-weight: 500;
      font-size: 18px;
      color: #CCBEA3;
      line-height: 40px;
      text-align: center;
    }
    .btn-confirm{
      width: 45%;
      height: 40px;
      background: linear-gradient(0deg, #CCA67A, #FFF4D9);
      border-radius: 20px;
      font-family: PingFang SC;
      font-weight: 500;
      font-size: 18px;
      color: #260C04;
      line-height: 40px;
      text-align: center;
    }
  }
}
</style>
